<template>
  <div class="globalHeader">
    <div class="left">
      <a-space style="cursor: pointer" @click="router.replace('/')">
        <a-avatar>
          <img
            alt="avatar"
            src="https://cdn-icons-png.flaticon.com/128/10130/10130599.png"
          />
        </a-avatar>
        <div class="title">助农购物平台</div>
      </a-space>
    </div>
    <div class="right">
      <a-space size="large">
        <div style="cursor: pointer">帮助中心</div>
        <div
          style="cursor: pointer"
          @click="router.push(`/common/login`)"
          v-if="getUserCookie().username === undefined"
        >
          登录/注册
        </div>
        <a-dropdown v-else trigger="hover">
          <el-avatar
            :size="50"
            :src="getUserCookie().avatar"
            class="user-avatar"
          >
            <el-icon :size="30" v-if="!getUserCookie().avatar">
              <div style="cursor: pointer">{{ getUserCookie().username }}</div>
            </el-icon>
          </el-avatar>
          <template #content>
            <a-doption @click="router.push('/personage/personageSettings')">
              <template #icon>
                <icon-settings />
              </template>
              个人设置
            </a-doption>
            <a-doption @click="showUpdatePwdModel = true">
              <template #icon>
                <icon-safe />
              </template>
              密码修改
            </a-doption>
            <a-doption
              @click="router.push('/product/myProduct')"
              v-if="getUserCookie().role === 1"
            >
              <template #icon>
                <icon-idcard />
              </template>
              我的商品
            </a-doption>
            <a-doption
              @click="router.push('/product/productRelease')"
              v-if="getUserCookie().role === 1"
            >
              <template #icon>
                <icon-plus />
              </template>
              发布商品
            </a-doption>
            <!--  购物车  -->
            <a-doption @click="router.push('/cart/myCart')">
              <template #icon>
                <icon-shopping-cart />
              </template>
              购物车
            </a-doption>
            <a-doption
              @click="router.push('/product/productExamine')"
              v-if="getUserCookie().role === 3"
            >
              <template #icon>
                <icon-check />
              </template>
              审核商品
            </a-doption>
            <!--     用户管理       -->
            <a-doption
              @click="router.push('/user/userManagement')"
              v-if="getUserCookie().role === 3"
            >
              <template #icon>
                <icon-user />
              </template>
              用户管理
            </a-doption>
            <!--     评论管理       -->
            <a-doption
              @click="router.push('/comment/commentManagement')"
              v-if="getUserCookie().role === 3"
            >
              <template #icon>
                <icon-message />
              </template>
              评论管理
            </a-doption>
            <a-doption @click="router.push('/order/myOrder')">
              <template #icon>
                <icon-ordered-list />
              </template>
              我的订单
            </a-doption>
            <a-doption @click="logout()">
              <template #icon>
                <icon-import />
              </template>
              退出登录
            </a-doption>
          </template>
        </a-dropdown>
      </a-space>
    </div>
    <!--    openapi &#45;&#45;input http://localhost:8086/v3/api-docs &#45;&#45;output ./generated &#45;&#45;client axios-->

    <!--    修改密码弹窗-->
    <a-modal
      v-model:visible="showUpdatePwdModel"
      title="修改密码"
      @ok="doUpdatePwd()"
      @close="router.go(0)"
    >
      <a-form
        :label-col-props="{ span: 6, offset: 1 }"
        :wrapper-col-props="{ span: 15 }"
        :model="updatePwdForm"
      >
        <a-form-item required label="原密码">
          <a-input-password v-model="updatePwdForm.oldPassword" />
        </a-form-item>
        <a-form-item required label="新密码">
          <a-input-password v-model="updatePwdForm.newPassword" />
        </a-form-item>
        <a-form-item required label="确认密码">
          <a-input-password v-model="updatePwdForm.checkPassword" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { reactive, ref } from "vue";
import message from "@arco-design/web-vue/es/message";
import { clearUserCookie, getUserCookie } from "@/utils/auth";
import { UserControllerService } from "@/generated";

const router = useRouter();
const showUpdatePwdModel = ref<boolean>(false);

const updatePwdForm = reactive({
  oldPassword: "",
  newPassword: "",
  checkPassword: "",
});

const logout = () => {
  // 刷新页面
  // location.reload();
  UserControllerService.logout().then((res) => {
    console.log("res", res);
    if (res.code === 0) {
      // 清除用户信息
      clearUserCookie();
      message.success("退出成功");
      router.push("/common/login");
    } else {
      message.error("退出失败");
    }
  });
};

const doUpdatePwd = async () => {
  const res = await UserControllerService.updatePassword(updatePwdForm);
  if (res.code === 0) {
    message.success("密码修改成功");
    showUpdatePwdModel.value = false;
    logout();
  } else {
    message.error("修改密码失败");
    // 不需要在这里关闭模态框，因为失败时模态框会保持打开状态
    showUpdatePwdModel.value = true;
    return;
  }
};
</script>

<style scoped>
.globalHeader {
  display: flex;
  height: 100%;
  margin: auto 100px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dee1e6;
}

.title {
  font-size: 20px;
  color: #165dff;
  margin-left: 9px;
}
</style>
